<template>
  <div class="merge-layout">
    <el-table :data="fileList" style="width: 100%" height="250">
      <el-table-column prop="path" label="文件路径"></el-table-column>
    </el-table>

    <div class="file-actions">
      <el-button @click="addFile">增加</el-button>
      <el-button @click="removeFile">移除</el-button>
      <el-button @click="moveUp">上移</el-button>
      <el-button @click="moveDown">下移</el-button>
    </div>

    <div class="output-path-row">
      <span>输出目录 :</span>
      <el-input v-model="mergeOutputPath"></el-input>
      <el-button @click="selectMergeOutputPath">
        <el-icon><Folder /></el-icon>
      </el-button>
    </div>

    <el-card class="merge-options-group">
      <template #header>
        <div>合并选项</div>
      </template>
      <el-radio-group v-model="mergeOption">
        <el-radio label="noCopy">不编解码，要求格式统一</el-radio>
        <el-radio label="ts">先转成ts，再合并，可以是多种格式</el-radio>
        <el-radio label="videoFilter">滤镜合并(视频stream0)，编解码</el-radio>
        <el-radio label="audioFilter">滤镜合并(音频stream0)，编解码</el-radio>
      </el-radio-group>
    </el-card>

    <el-input type="textarea" v-model="mergeLog" :rows="5"></el-input>

    <el-button type="primary" @click="runMerge">运行</el-button>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue';
import { Folder } from "@element-plus/icons-vue";
import { SelectDirectory, SelectFile } from "../../../wailsjs/go/main/App";
import { ElMessage } from 'element-plus';

export default {
  name: "MergeTab",
  components: {
    Folder
  },
  setup() {
    const state = reactive({
      fileList: [],
      mergeOutputPath: "",
      mergeOption: "noCopy",
      mergeLog: ""
    });

    const addFile = async () => {
      try {
        SelectFile().then((result) => {
          if (result) {
            state.fileList.push({ path: result });
          }
        });
      } catch (err) {
        console.error("选择文件失败:", err);
      }
    };

    const removeFile = () => {
      if (state.fileList.length > 0) {
        state.fileList.pop();
      }
    };

    const moveUp = () => {
      // 实现文件上移的逻辑
      console.log("文件上移");
    };

    const moveDown = () => {
      // 实现文件下移的逻辑
      console.log("文件下移");
    };

    const selectMergeOutputPath = async () => {
      try {
        SelectDirectory().then((result) => {
          state.mergeOutputPath = result;
        });
      } catch (err) {
        console.error("选择输出目录失败:", err);
      }
    };

    const runMerge = () => {
      // 实现合并的逻辑
      console.log("运行合并");
      // 这里添加实际的合并逻辑
    };

    return {
      ...toRefs(state),
      addFile,
      removeFile,
      moveUp,
      moveDown,
      selectMergeOutputPath,
      runMerge
    };
  }
};
</script>

<style scoped>
.merge-layout {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.file-actions {
  display: flex;
  gap: 10px;
}

.output-path-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.merge-options-group {
  width: 100%;
}
</style>